<template>
  <view class="x-read">
    <x-popup :maskClick="false" width="700rpx" :height="880" v-model="show" :title="title" type="center">
      <view style="padding: 0 20rpx 150rpx 20rpx;box-sizing: border-box">
        <rich-text :nodes="text"></rich-text>
      </view>
      <template #bottom>
        <view class="x-space-between btn-nav">
          <view @click="onCancel" style="width: 45%"><button class="x-btn-danger x-btn">{{cancelText}}</button></view>
          <view @click="onConfirm" style="width: 45%"><button class="x-btn-primary x-btn">{{confirmText}}</button></view>
        </view>
      </template>
    </x-popup>
  </view>
</template>

<script setup name="x-text">
import XPopup from '@/components/lib/popup.vue';
const props = defineProps({
  modelValue: {
    default: false
  },
  text:{
    type: String,
    default: "",
  },
  title:{
    type: String,
    default: "内容",
  },
  time:{
    type: Number,
    default: 5
  },
  confirmText:{
    type: String,
    default: "确认",
  },
  cancelText:{
    type: String,
    default: "取消",
  }
});
let show = ref(false);
const emit = defineEmits(['update:modelValue', 'open', 'close', 'cancel', 'confirm'])

const onCancel = () => {
  emit('cancel')
  show.value = false;
}

const onConfirm = () => {
  emit('confirm')
  show.value = false;
}


watch(show, (value) => {
  emit('update:modelValue', value);
})
watch(() => props.modelValue, (value) => {
  show.value = value;
}, {immediate: true})
</script>

<style scoped lang="less">
.x-read{
  .x-disabled{
    border: none
  }
}

.btn-nav {
  width: 100%;
  background-color: #fff;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  z-index: 2; /* 调整层次顺序 */
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
</style>
